<template>
  <select :name="name" class="form-control form-control-time" v-model="fldValue[0]">
    <option v-for="number in 24" :value="value(number)">{{key(number)}}</option>
  </select> :
  <select class="form-control form-control-time" :name="name" v-model="fldValue[1]">
    <option v-for="number in 60" :value="value(number)">{{key(number)}}</option>
  </select> {{hide?':':''}}
  <select v-if="hide" class="form-control form-control-time" v-model="fldValue[2]">
    <option v-for="number in 60" :value="value(number)">{{key(number)}}</option>
  </select>
</template>

<style lang="css" scoped>
.form-control-time {
  width: auto;
  display: inline-block;
}
</style>


<script>
export default {
  name: "time",
  props: {
    fldValue: {
      type: Array,
      default: () => []
    },
    hide: {
      type: Boolean,
      default: true
    },
    name: {
      type: String
    }
  },
  methods: {
    value(val) {
      let num = val >= 10 ? val : "0" + val;
      return num.toString();
    },
    key(val) {
      let num = val >= 10 ? val : "0" + val;
      return num.toString();
    }
  }
};
</script>

<style lang="css">

</style>
